<template>
	<view class="appointCharge">
		<view class="ff-bg-fff ff-color-222 ff-font-14 ff-margin-12 ff-border-radius-10">
			<view class="ff-font-weight-600 ff-padding-left-15 ff-padding-top-15 ff-font-16 ff-margin-bottom-7">指定技术负责人
			</view>
			<view class="ff-padding-left-15 ff-font-13 ff-color-9A9A9A ff-margin-bottom-6">如果通过审核，请指定本次技术负责人进行签发报告
			</view>
			<view class="ff-padding-15">
				<u-search placeholder="请输入姓名进行搜索" :show-action="false" :height="80" @change="searchChange"
					v-model="searchName"></u-search>
				<view v-if="issueList.length > 0" class="boxHeight">
					<view
						class="appointCharge-content ff-margin-top-10 ff-flex-between ff-bg-fff ff-border-radius-10 ff-solid-bottom"
						v-for="(item, index) of issueList" :key="index" @click="issueClick(item)">
						<view class="ff-align-items-one">
							<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/reg-3.png"
								mode=""></image>
							<view class="appointCharge-content-info">
								<view class="ff-font-15 ff-margin-bottom-8 ff-line-height-1-3">
									{{ item.username }}{{ item.staffPhone }}
								</view>
								<view class="ff-font-13 ff-margin-bottom-6 ff-color-9A9A9A">{{ item.macroName }}</view>
								<view class="ff-font-13 ff-margin-bottom-6 ff-color-9A9A9A" v-if="item.position">
									{{ item.position }}
								</view>
								<view class="ff-font-13 ff-color-red" v-if="item.invalid">证书已到期</view>
							</view>
						</view>
						<view class="appointCharge-content-select">
							<view v-if="item.invalid">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/no-select-invalid.png"
									mode="">
								</image>
							</view>
							<view v-else>
								<image v-show="item.id != issueSelectId"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/no-select.png"
									mode=""></image>
								<image v-show="item.id == issueSelectId"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/select.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="ff-padding-left-10 boxHeight1 ff-margin-top-20 ff-flex-between ff-bg-fff ff-color-999"
					v-else>暂无此人员</view>
			</view>
		</view>
		<view class="appointCharge-but"><u-button type="primary" shape="circle"
				@click="submitChargeClick">确定提交</u-button></view>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="staffModal" @confirm="staffConfirm" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="该员工的岗位非“技术负责人”，与“社会消防技术服务信息系统”登记的岗位要求不匹配，请及时去“社会消防技术服务信息系统”更新岗位信息。" />
		<u-modal v-model="submitModal" @confirm="submitConfirm" show-cancel-button="true" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="请确认是否提交审核？提交后等待技术负责人签发报告。" />
	</view>
</template>

<script>
	export default {
		name: 'appointCharge',
		data() {
			return {
				staffModal: false, // 是否是技术负责人弹框显/隐
				submitModal: false, // 提交的弹框显/隐
				searchName: '', // 搜索的内容
				params: {
					testId: '',
					signer: ''
				},
				issueList: [],
				issueSelectId: ''
			};
		},
		onLoad(e) {
			this.params.testId = e.id;
			this.getIssueList(); // 获取签发人列表数据
		},
		methods: {
			// 动态搜索
			searchChange() {
				this.getIssueList(); // 获取签发人列表数据
			},
			// 点击选择当前人员
			issueClick(item) {
				if (item.invalid) {
					return
				}
				// if (item.position != '技术负责人') {
				// 	this.staffModal = true;
				// 	return;
				// }
				this.issueSelectId = item.id;
				this.params.signer = item.userId;
			},
			// 点击选择当前人员--确定操作
			staffConfirm() {
				this.staffModal = false;
			},
			// 获取签发人列表数据
			async getIssueList() {
				this.$refs.loading.openLoading('加载中···');
				let params = {
					username: this.searchName,
					testId: this.params.testId
				};
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/org/staff/querySigner',
					data: params
				});
				// console.log('获取签发人列表数据----', data);
				if (data.code = 200) {
					this.issueList = data.data;
					this.issueList.forEach(item => {
						this.$set(item, 'issueSelectId', false);
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 点击提交------------第一步
			submitChargeClick() {
				if (!this.params.signer) {
					this.$refs.uToast.show({
						title: '请指定技术负责人',
						type: 'error'
					});
					return;
				}
				this.submitModal = true;
			},
			// 提交操作---------------第二步
			submitConfirm() {
				let that = this;
				that.$refs.loading.openLoading('提交中···');
				that.$http
					.post({
						url: '/bsTestProjectInfo/org/reconfirmSigner',
						data: that.params
					})
					.then(res => {
						that.$refs.loading.closeLoading();
						if (res.code == 200) {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							setTimeout(() => {
								that.$pageJump.reLaunch('/pages/detection/mechanism/Maintenance');
							}, 500);
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定')
									}
								}
							})
						}
					});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss">
	.appointCharge {
		.boxHeight1 {
			height: 560rpx;
		}

		.boxHeight {
			height: 600rpx;
			overflow-y: auto;
		}

		.ff-color-9A9A9A {
			color: #9a9a9a;
		}

		&-content {
			padding: 24rpx 30rpx;
			align-items: center;

			.ff-align-items-one {
				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 32rpx;
				}
			}

			&-info {
				width: 430rpx;
			}

			&-select {
				image {
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		&-but {
			width: 90%;
			margin: 13% 5% 5%;

			/deep/.u-size-default {
				height: 90rpx !important;
				line-height: 90rpx !important;
			}
		}

		//  iphone x iphone xr 等适配 *
		@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
			.boxHeight {
				height: 800rpx;
			}
		}

		// xs max
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
			.boxHeight {
				height: 800rpx;
			}
		}

		// xr
		@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
			.boxHeight {
				height: 800rpx;
			}
		}
	}
</style>